<template>
  <div class="my-table">
    <el-table
      ref="tableRef"
      v-loading.body="loading"
      :data="data"
      element-loading-text="加载中 ..."
      :stripe="stripe"
      highlight-current-row
      :cell-style="{ borderBottom: '1px solid rgba(206, 216, 237, 0.6)' }"
      :header-cell-style="{
        borderBottom: '1px solid rgba(206, 216, 237, 0.6)',
        background: '#dbe4fb !important',
        color: '#7180A7'
      }"
      @selection-change="handleTableSelectionChange"
      :checkBox="checkBox"
      @row-click="handleRowClick"
      @cell-click="handleCellClick"
    >
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="55"
          :fixed="item.fixed"
          align="center"
          header-align="center"
          :key="`selection_${index}`"
        ></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="80"
          :fixed="item.fixed"
          label="序号"
          :index="item.indexMethod"
          :key="`index_${index}`"
        ></el-table-column>
        <!-- 多级表头 -->
        <el-table-column
          v-else-if="item.multi"
          align="center"
          :label="item.label"
          :key="`multi_${index}`"
        >
          <el-table-column
            v-for="(child, childIndex) in item.children"
            :key="`child_${index}_${childIndex}`"
            v-bind="child"
          >
          </el-table-column>
        </el-table-column>
        <!-- 自定义内容 （进行增删改查操作等或者插入HTML） -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"
        ></slot>
        <!-- 常规内容 -->
        <el-table-column
          v-else
          show-overflow-tooltip
          v-bind="item"
          :fixed="item.fixed"
          :min-width="item.minWidth"
          :key="`normal_${index}`"
        ></el-table-column>
      </template>
    </el-table>
    <!-- 自定义内容 -->
    <slot name="custom-content"></slot>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    checkBox: {
      type: Boolean,
      default: false
    },

    wrapperHeight: {
      type: [Number, String],
      default: '100%'
    },
    maxHeight: {
      type: [Number, String],
      default: 'auto'
    },
    //表格格式
    tableSize: {
      type: String,
      default: 'medium'
    },
    //是否为斑马纹 table
    stripe: {
      type: Boolean,
      default: true
    },
    otherConfig: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 单选
    handleTableSelectionChange(currentRow) {
      this.$emit('changeSelect', currentRow)
    },
    // 点击行获得行数
    handleTableRowClick(currentRow) {
      this.$emit('rowClick', currentRow)
    },
    checkSelectable(row, index) {
      console.log(111111111)
      console.log('this.checkBox')
      return !!(index === 1)
      // this.$emit('checkSelectable', row)
    },
    /**
     * @description: 选择当前行
     * @return {*}
     */
    handleRowClick(row) {
      this.$emit('handleRowClick', row)
    },
    handleCellClick(row, column, cell, event) {
      this.$emit('handleCellClick', row, column, cell, event)
    }
  },
  watch: {
    data() {
      // 重新请求数据时 table滚动到顶部
      // this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
.my-table {
  border-radius: 10px;
  border: 1px solid rgba(206, 216, 237, 0.6);
  .el-table {
    border-radius: 10px;
  }

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #f9fafe !important;
  }
}
</style>
